<!DOCTYPE html>
<html>
<head>
	<title>form element practice</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
	<style type="text/css">
		body div div{
			margin-left: 20px;
			padding-bottom: 10px;
		}
		body div div span{
			display:block;
			padding-bottom: 10px;
		}

	</style>
</head>

<body>
	<h3>data binding</h3>
	<div id = 'app'>
		<div>		
			<span> 【input practice】 </span>
			<span> input control <input type="" name="" v-model.trim = "message"><br>
			 message: {{ message }}
			</span>
			<span> use "lazy" attribute <input type="" name="" v-model.lazy = "message_lazy"><br>
			 message: {{ message_lazy }}
			</span>
			<span> use "trim" attribute <input type="" name="" v-model.trim = "message_trim"><br>
			 message: {{ message_trim }}
			</span>
		</div>
		<div>
			<span> 【radio practice】 </span>
			<span>
				<input type="radio" name="" v-model = "radio" value="google"><label for="google">Google</label>
				<input type="radio" name="" v-model = "radio" value="apple"><label for="apple">Apple</label>
				<input type="radio" name="" v-model = "radio" value="yahoo"><label for="yahoo">Yahoo</label><br>	
				this's what you choose: {{radio}}
			</span>
		</div>
		<div>
			<span> 【checkbox practice】 </span>
			<span>
				<label for="google">What country do you want to travel the next year</label><br>
				 Select All <input type="checkbox" name="" v-model ='checks' @change='checkAll()' >
				<div v-for='item in checkList' >
					<input type="checkbox" name="" v-model = "checkbox" :value='item.value'><label :for='item.key'>{{item.key}}</label>
				</div>
				this's what you choose: {{checkbox}}
			</span>
		</div>
		<div>
			<span> 【select practice】 </span>
			<span>
				<select v-model="select" > 
					<option v-for = "option in selectList" :value="option.index">{{option.value}}</option>
				</select>
				<br>	
				this's what you choose: {{select}}
			</span>

		</div>
	</div>

	<script type="text/javascript">
		var app = new Vue({
			el:"#app",
			data:{
				message:" hello ,my friends ",
				message_lazy:"I'm a lazy input",
				message_trim:"Not allow the Blank space ",	
				radio:"google",
				checks:false,
				checkList:[{"key":"China","value":"china"},{"key":"American","value":"american"},{"key":"Japan","value":"japan"}],
				checkbox:["japan"],
				selectList:[{ "index":0 , "value": "please choose a number" },{ "index":1 , "value": 1 },{ "index":2 , "value": 2 },{ "index":3 , "value": 3 },{ "index":4 , "value": 4 },],
				select:""
			},
			methods:{
				checkAll:function(){
					if(this.checks){
						this.checkbox = [];
						for(  x in this.checkList){
							console.log(this.checkList[x].value);
							this.checkbox.push(this.checkList[x].value);
						}
					}else{
						this.checkbox = [];
					}
				}
			},
			watch:{
				"checkbox":function(){
					if(this.checkbox.length == this.checkList.length ){
						this.checks = true
					}else{
						this.checks = false
					}
				}
			}

		});


	</script>

</body>
</html>